<!--
 * @Author: Lzx
 * @LastEditors: Lzx
 * @Date: 2021-06-24 09:06:36
 * @LastEditTime: 2022-11-11 22:37:10
 * @FilePath: /web-vue/src/views/Login.vue
 * @Description: 系统登录组件
-->
<template>
  <div class="login" >
  <el-form
    ref="loginForm"
    v-model="loginForm"
   
    label-position="left"
    label-width="0px"
    class="login-form"
  >
    <h3 class="title">欢迎使用民宿管理系统</h3>
    <el-form-item prop="user">
      <el-input
        v-model="loginForm.user"
        type="text"
        auto-complete="off"
        placeholder="账号"
      >
        <svg-icon
          slot="prefix"
          icon-class="user"
          class="el-input__icon input-icon"
        />
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="loginForm.password"
        type="password"
        auto-complete="off"
        placeholder="密码"
        @keyup.enter="login"
        :disabled="submitDisabled"
      >
        <svg-icon
          slot="prefix"
          icon-class="password"
          class="el-input__icon input-icon"
        />
      </el-input>
    </el-form-item>
    
    
    
    <el-form-item style="width: 100%">
      <el-button
      class="loginBt" 
        size="medium"
        type="primary"
        style="width: 100%"
        @click="login"
      >
        <span >登 录</span>
      </el-button>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        size="medium"
        type="primary"
        style="width: 100%"
        @click="open"
        class="loginBt2" 
      >
        <span >注 册</span>
      </el-button>
    </el-form-item>
  </el-form>


  <!-- 编辑地区表单 -->
  <ChooseForm ref="chooseForm" @afterSubmit="loginBefore"></ChooseForm>

 
  <el-dialog class="ffwrapper"
    :visible.sync="show"
    append-to-body  
    :center="true" 
    destroy-on-close="true" 
    @close=true
    title="欢迎注册本系统，请根据提示填写以下信息">
    <!-- 用户注册表单 -->
  <RegisterForm ref="registerForm"  append-to-body></RegisterForm>
  </el-dialog>
</div>
</template>

<script>
import { mapMutations } from "vuex";

import ChooseForm from "@/views/Region/chooseForm.vue";
import RegisterForm from "@/views/SysUser/registerForm.vue";
import SvgIcon from '@/components/SvgIcon/index.vue'
export default {
name: "login",

components: {
  ChooseForm,
  RegisterForm,
  SvgIcon
},

data() {
  return {
    show: false,
    loginForm: {
      user: "",
      password: "",
    },
    submitDisabled: false,
  };
},

computed: {
  // 最近一次路由url属性变化。latestRouteUrl 是 store.js 的全局变量，
  latestRouteUrl: {
    get() {
      return this.$store.state.latestRouteUrl;
    },
    set(val) {
      if (val) this.$store.state.latestRouteUrl = val;
    },
  },
},

methods: {
  open() {
    this.show = true;
  },
  // store 方法
  ...mapMutations({
    initState: "initState",
  }),

  // 登录请求处理
  login() {
    
    if(this.loginForm.user!=null && this.loginForm.password != null && this.loginForm.user!='' && this.loginForm.password != ''){
      // 密码输入框不可用
    this.submitDisabled = true;
    // 请求参数
    let param = {};
    param["username"] = this.loginForm.user;
    param["password"] = this.loginForm.password;
    const loading = this.$loading({
      target: document.querySelector(".login"),
      lock: true,
      text: "正在登录，请耐心等待！",
    });
  

    let vueIns = this;
    this.$api
      .userLoginAuth(param)
      .then((res) => {
        let { status, message, data } = res.data;
        if (status === 200) {
          // 保存会话
          localStorage.setItem("userSession", JSON.stringify(data));
          // 初始化 vuex 全局变量
          this.initState();
          // 默认路由跳转
          //this.$router.push("/");
          //alert("租客");
          // 初始化字典信息
          this.initCommonDict();
          // 初始化部分页面的权限控制
          this.initAuth();

          // 默认路由跳转
          // this.$router.push("/view/Index");

          // 根据角色路由跳转
          if (data.roleIds.indexOf(7) > -1) {
            this.$router.push("/index");
            //alert("房东")
          } else {
            this.$router.push("/view/Index");
            //alert("管理员")
          }

        } else {
          this.$alert(message, "登录失败", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {
              this.submitDisabled = false;
            },
          });
        }

        loading.close();
        this.submitDisabled = false;
      })
      .catch(function (err) {
        loading.close();
        vueIns.submitDisabled = false;
        console.log("【用户登录】接口发生错误: " + err);
      });
      }else{
    this.$message.error('用户名或密码不能为空');
  }
  },

  // 初始化通用字典信息
  initCommonDict() {
    // 1）获取部门列表
    this.$api
      .querySysDepartment()
      .then((res) => {
        let { status, message, data } = res.data; // 响应数据
        if (status == 200) {
          this.$store.state.DICT.deptList = data;
        } else {
          this.$alert(`${message}`, "部门列表", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      })
      .catch(function (err) {
        loading.close();
        vueIns.visible = false;
        console.log(`【部门列表】查询接口发生错误：${err}`);
      });

    // 2）获取系统用户列表
    this.$api
      .querySysUser({ pageSize: 1000 })
      .then((res) => {
        let { status, message, data } = res.data; // 响应数据
        if (status == 200) {
          this.$store.state.DICT.sysUserList = data.items;
        } else {
          this.$alert(`${message}`, "系统用户列表", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      })
      .catch(function (err) {
        loading.close();
        vueIns.visible = false;
        console.log(`【系统用户列表】查询接口发生错误：${err}`);
      });

    // 5）获取系统角色列表
    this.$api
      .querySysRoleList()
      .then((res) => {
        let { status, message, data } = res.data; // 响应数据
        if (status == 200) {
          this.$store.state.DICT.sysRoleList = data;
        } else {
          this.$alert(`${message}`, "系统角色列表", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      })
      .catch(function (err) {
        loading.close();
        vueIns.visible = false;
        console.log(`【系统角色列表】查询接口发生错误：${err}`);
      });

    // 6）获取房源类型列表
    this.$api
      .queryHouseTypeDictList({ pageSize: 1000 })
      .then((res) => {
        let { status, message, data } = res.data; // 响应数据
        if (status == 200) {
          this.$store.state.DICT.houseTypeSelect = data;
        } else {
          this.$alert(`${message}`, "房源类型列表", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      })
      .catch(function (err) {
        loading.close();
        vueIns.visible = false;
        console.log(`【房源类型列表】查询接口发生错误：${err}`);
      });

    // 7）获取地区列表
    this.$api
      .queryRegionTreeList()
      .then((res) => {
        let { status, message, data } = res.data; // 响应数据
        if (status == 200) {
          this.$store.state.DICT.regionCode = data;
        } else {
          this.$alert(`${message}`, "地区列表", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      })
      .catch(function (err) {
        loading.close();
        vueIns.visible = false;
        console.log(`【地区列表】查询接口发生错误：${err}`);
      });

    // 8）获取房源列表
    this.$api
      .queryHouseDictList()
      .then((res) => {
        let { status, message, data } = res.data; // 响应数据
        if (status == 200) {
          // list 转 map
          let map = new Map();
          data.forEach((element) => {
            map.set(element.code, element.name);
          });
          this.$store.state.DICT.houseMap = map;
        } else {
          this.$alert(`${message}`, "房源列表", {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        }
      })
      .catch(function (err) {
        loading.close();
        vueIns.visible = false;
        console.log(`【房源列表】查询接口发生错误：${err}`);
      });
  },

  // 登录前置处理
  loginBefore(region) {
    // 高风险地区(拦截)
    if (region.isHighRisk === "1") {
      this.$alert(
        `您来自中高风险地区，暂时无法登录本站点！`,
        "登录拦截提示",
        {
          type: "error",
          confirmButtonText: "确定",
          callback: (action) => {},
        }
      );
    } else {
      // 登录
      this.login();
    }
  },

  // 初始化权限
  initAuth() {
    if (this.$store.state.userSession) {
      if (this.$store.state.userSession.roleIds.indexOf(1) > -1) {
        this.$store.state.auth.isDelete = true;
        this.$store.state.auth.isAdd = true;
        this.$store.state.auth.isEdit = true;
        this.$store.state.auth.isAppraise = true;
      } else if (this.$store.state.userSession.roleIds.indexOf(5) > -1) {
        this.$store.state.auth.isEdit = true;
      } else if (
        this.$store.state.userSession.roleIds.indexOf(2) > -1 ||
        this.$store.state.userSession.roleIds.indexOf(7) > -1
      ) {
        this.$store.state.auth.isAdd = true;
        this.$store.state.auth.isAppraise = true;
      }
    }
  },
},
};
</script>

<style lang="scss" scoped>
// // 顺时针旋转
// @-webkit-keyframes anticlockwise-rotation {
//   from {
//     -webkit-transform: rotate(0deg);
//   }
//   to {
//     -webkit-transform: rotate(360deg);
//   }
// }

// @-webkit-keyframes vertical-rotation {
//   from {
//     -webkit-transform: rotate(90deg);
//   }
//   to {
//     -webkit-transform: rotate(450deg);
//   }
// }

// // 逆时针旋转
// @-webkit-keyframes clockwise-rotation {
//   from {
//     -webkit-transform: rotate(360deg);
//   }
//   to {
//     -webkit-transform: rotate(0deg);
//   }
// }
.ffwrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}
.el-form-item .el-form-item__content .el-button {
margin-left: 0;
}
.loginBt {
font-size: 0px;

left: 0;
top: 52vh;
width: 486px;
height: 43px;
background: #409eff;
text-align: center;
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 14px;
color: #ffffff;
}
.loginBt2 {
font-size: 0px;


top: 62vh;
width: 486px;
height: 43px;
background: #67c23a;
text-align: center;
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 14px;
color: #ffffff;
}
.login {
//让整个div固定在屏幕的最上方和最左方
position: fixed;
top: 100;
left: 0;
//让整个div跟屏幕实现一模一样的大小
width: 100%;
height: 87%;
// min-width: 1000px;
//让整个div在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0
z-index: index;
zoom: 1;

display: flex;
justify-content: center;
align-items: center;

background-size: cover;
//让图片随屏幕大小同步缩放
//background-repeat:no-repeat ;
//让图片随屏幕大小同步缩放
  -webkit-background-size: cover !important;
 -moz-background-size: cover !important;
 -o-background-size: cover !important;
background-size:100 auto;
background-image: url("~@/assets/images/background/bg1.jpg");
}
// 记住密码后输入框默认浏览器样式调整
input:-webkit-autofill {
  -webkit-text-fill-color: #42526c !important; // 记住密码的字的颜色
  transition: background-color 999999s ease-in-out 999999s; // 延时渲染背景色来去除背景色
  caret-color: #21d7eb; //光标颜色
}

.title {
margin: 0 auto 30px 25px;
text-align: center;
color: #707070;
}

.login-form {
opacity:0.95;
border-radius: 6px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
.el-input {
  height: 38px;
  input {
    height: 38px;
  }
}
.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
//float: right;
img {
  cursor: pointer;
  vertical-align: middle;
}
}
.register {
float: right;
color: rgb(24, 144, 255);
}
a {
color: #1890ff;
text-decoration: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: color 0.3s;
}

</style>

